import React, { useState, useEffect } from 'react';
import { Layout, Menu, Dropdown, Avatar } from 'antd';
import '../style/layout.css'
import { Route } from 'react-router-dom'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  UnorderedListOutlined,
  MessageOutlined,
  PoweroffOutlined
} from '@ant-design/icons';
import { logout } from '../api/login'

import Dashbord from './Dashbord'
import ARTAdd from './ARTAdd'
import ARTList from './ARTList'
import ARTType from './ARTType'
import Comment from './Comment'

const { SubMenu } = Menu

const { Header, Sider, Content } = Layout;

function LayoutFrame(props) {

  const [collapsed, setCollapsed] = useState(false)
  const [selectedKeys, setSelectedKeys] = useState(['/'])

  useEffect(() => {
    const path = props.history.location.pathname.match(/console(\S*)/)[1].split('/')[1]
    setSelectedKeys(['/' + path])
    // props.history.listen(() => {
    //   let path = props.history.location.pathname
    //   if (path.indexOf('artAdd') !== -1) setSelectedKeys(['/artAdd'])
    //   if (path.indexOf('artList') !== -1) setSelectedKeys(['/artList'])
    // })
  }, [props.history.location.pathname])

  const toggle = () => {
    setCollapsed(!collapsed)
  };

  const menuClick = (item) => {
    console.log(item)
    setSelectedKeys([item.key])
    props.history.push('/console' + item.key)
  }

  const menuHandleclick = ({ key }) => {
    if (key === "0") {
      logout()
      props.history.push('/login')
    }
  }
  const menu = (
    <Menu onClick={menuHandleclick}>
      <Menu.Item key="0"><PoweroffOutlined />退出</Menu.Item>
    </Menu>
  );

  return (
    <Layout className="layout-div">
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed} style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
        }}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/']}
          selectedKeys={selectedKeys}
          onClick={menuClick}>
          <Menu.Item key="/">
            <PieChartOutlined />
            <span>工具台</span>
          </Menu.Item>
          <SubMenu
            title={
              <span>
                <UnorderedListOutlined />
                <span>文章管理</span>
              </span>
            }
          >
            <Menu.Item key="/artList">文章列表</Menu.Item>
            <Menu.Item key="/artAdd">编辑文章</Menu.Item>
            <Menu.Item key="/artType">文章类型</Menu.Item>
          </SubMenu>
          <Menu.Item key="/comment">
            <MessageOutlined />
            <span>留言管理</span>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            position: 'fixed',
            left: !collapsed ? '200px' : '80px',
            width: '100%',
            transition: 'all 0.2s',
            zIndex: "1000",
            borderBottom: '1px solid #ccc',
          }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: toggle,
          })}
          <Dropdown className="dropdown-person" overlay={menu}>
            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
              <Avatar shape="square" size={40} src="http://img.codemobile.cn/web_author_face.png" />
            </a>
          </Dropdown>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: !collapsed ? '80px 16px 16px 216px' : '80px 16px 16px 96px',
            padding: '14px',
            transition: 'all 0.2s',
            borderRadius: '4px'
          }}
        >
          <div>
            <Route path="/console/" exact component={Dashbord} />
            <Route path="/console/artAdd/:id?" exact component={ARTAdd} />
            <Route path="/console/artList" exact component={ARTList} />
            <Route path="/console/artType" exact component={ARTType} />
            <Route path="/console/comment" exact component={Comment} />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
}

export default LayoutFrame